<template>
	<view class="main">
		<!-- 预约弹窗 -->
		<view class="maskClass" v-show="showMask">
			<view v-show="showMask" style="width: 70%; background-color: #fff; padding: 25px; border-radius: 15rpx; margin: 35% auto; z-index: 1">
				<view style="text-align: center">
					<text style="padding: 35rpx; font-size: 35rpx; font-weight: 700; text-align: center">请选择</text>
				</view>
				<!-- <view class="devideline"></view> -->
				<view class="login_from_input" style="margin-top: 20rpx">
					<view class="form-left">揭榜人</view>
					<view class="login_from_fun"><input v-model="orderInfo.contacts" placeholder="请输入揭榜人" /></view>
				</view>
				<view class="login_from_input">
					<view class="form-left">联系电话</view>
					<view class="login_from_fun"><input type="number" maxlength="11" v-model="orderInfo.telphone" placeholder="请输入联系电话" /></view>
				</view>
				<view class="login_from_input">
					<view class="form-left">
						<text>留言</text>
					</view>
					<view class="login_from_fun" style="height: 200rpx"><input v-model="orderInfo.message" placeholder="请输入留言内容" /></view>
				</view>
				<view class="submit_view">
					<button type="primary" class="submit" @click="submitOrder()">提交</button>
					<button type="warn" class="canncle" @click="closePopup()">取消</button>
				</view>
			</view>
		</view>
		<view>
			<u-swiper v-if="machineDetail.coverImage" :list="machineDetail.coverImage" :indicator="true" height="200"></u-swiper>

			<button class="btn_order" v-if="machineDetail.isJiebang == '0' && machineDetail.sfjb == '0'" type="primary" size="mini" @click="toggle('center')">我要揭榜</button>
			<button class="btn_order" style="background-color: darkgray" v-if="machineDetail.isJiebang == '0' && machineDetail.sfjb == '1'" type="primary" size="mini" @click="">
				已揭榜
			</button>

			<!-- <view class="top" style="width: 45%;float: right;">
					<view>
						<text class="creator">产地：{{machineDetail.insBasic.area?machineDetail.insBasic.area:'暂无'}}</text>
					</view>
					<view>
						<text class="creator">型号：{{machineDetail.insBasic.mInstruModel?machineDetail.insBasic.mInstruModel:'暂无'}}</text>
					</view>
					<view>
						<text class="creator">联系人：{{machineDetail.insBasic.mInstruContactPerson?machineDetail.insBasic.mInstruContactPerson:'暂无'}}</text>
					</view>
					<view>
						<text class="creator">累计服务次数：{{machineDetail.insBasic.totalServiceTime?machineDetail.insBasic.totalServiceTime:'暂无'}}次</text>
					</view>
					<view>
						<text class="creator">累计服务时长：{{machineDetail.insBasic.totalServiceTime?machineDetail.insBasic.totalServiceTime:'暂无'}}小时</text>
					</view>
					<view>
						<text class="creator">揭榜人数：{{machineDetail.jbrs}}人</text>
					</view>
					<view>
						<text class="price">研究经费：{{machineDetail.reward}}元</text>
					</view>
					<!-- <uni-tag text="立即下单" type="primary" style="margin-right: 15rpx; 
					width: 80px;text-align: center; float:right" @click="dial()"></uni-tag> 
					
				</view> -->
			<!-- <view class="type">
				<text class="publishTime">{{machineDetail.insBasic.mInstruOrganization}}</text>
			</view> -->
			<scroll-view class="content" scroll-y="true">
				<!-- <text class="title">榜单详细信息</text> -->
				<view>
					<text class="title">{{ machineDetail.title }}</text>
				</view>
				<view>
					<text class="creator">【榜单内容】：{{ machineDetail.content ? machineDetail.content : '暂无' }}</text>
				</view>
				<view>
					<text class="creator">【悬赏奖励】：{{ machineDetail.reward ? machineDetail.reward : '暂无' }}元</text>
				</view>
				<view>
					<text class="creator">【揭榜人数】：{{ machineDetail.jbrs ? machineDetail.jbrs : '暂无' }}人</text>
				</view>
				<view>
					<text class="creator">【关键技术】：{{ machineDetail.technology ? machineDetail.technology : '暂无' }}领域</text>
				</view>
				<view>
					<text class="creator">【技术指标】：{{ machineDetail.norm ? machineDetail.norm : '暂无' }}</text>
				</view>
				<view>
					<text class="creator">【单位名称】：{{ machineDetail.enterpriseName ? machineDetail.enterpriseName : '暂无' }}</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
function getDate(type) {
	const date = new Date();

	let year = date.getFullYear();
	let month = date.getMonth() + 1;
	let day = date.getDate();

	if (type === 'start') {
		year = year - 10;
	} else if (type === 'end') {
		year = year + 10;
	}
	month = month > 9 ? month : '0' + month;
	day = day > 9 ? day : '0' + day;

	return `${year}-${month}-${day}`;
}

import env from '../../../utils/env';
import * as order from '@/api/personCenter/ORDER.js';
import * as data from '@/api/system/dict/data';
import * as jbgs from '@/api/jbgs/index.js';
import uniPopup from '@/components/uni-popup/components/uni-popup/uni-popup.vue';
// import uniTransition from "@/components/uni-transition/components/uni-transition/uni-transition.vue"
export default {
	components: {
		uniPopup
	},
	data() {
		return {
			machineDetail: {},
			categaryLisy: [],
			// showPopup:false,
			popupType: 'top',
			orderStatus: '0',
			//截止时间选择相关
			date: getDate({
				format: true
			}),
			startDate: getDate('start'),
			endDate: getDate('end'),
			phone: '',
			detail: '',
			orderInfo: {
				contacts: '', //揭榜人
				jbgsId: '', //榜单id
				memberId: '', //登录人ID
				memberName: '', //登录人名字
				message: '', //留言内容
				telphone: '' //联系人电话
			},
			showMask: false,
			bdID: ''
		};
	},
	onLoad(option) {
		// this.getCategaty()
		this.bdID = option.id;
		this.getMachineDetail(this.bdID);
		this.getUser();
	},
	methods: {
		getUser() {
			const value = uni.getStorageSync('userInfo');
			this.orderInfo.memberName = value.login_user.member.username;
			this.orderInfo.memberId = value.login_user.member.id;
		},
		getMachineDetail(id) {
			jbgs.getBdDetail(id).then((res) => {
				this.machineDetail = res.data;
				console.log(this.machineDetail);
				if(res.data.coverImage){
					this.machineDetail.coverImage = res.data.coverImage.split(',').map((item) => `${env.imgUrl}` + item)
				}else{
					delete this.machineDetail.coverImage
				}
				// let arr = res.data.coverImage.split(',').map((item) => `${env.imgUrl}` + item);
				// this.machineDetail.coverImage = arr;
				console.log(this.machineDetail);
			});
		},
		// dial(){
		// 	this.showPopup = true
		// },
		toggle(popupType) {
			console.log('弹窗');
			this.popupType = popupType;
			// this.$refs['orderpopup'].open();
			this.showMask = true;
		},
		closePopup() {
			// this.$refs['orderpopup'].close();
			this.showMask = false;
		},
		change(e) {},
		bindDateChange(e) {
			this.date = e.detail.value;
		},
		submitOrder() {
			if (this.orderInfo.telphone == '') {
				uni.showToast({
					icon: 'none',
					title: '联系电话不能为空！'
				});
			} else {
				this.orderInfo.jbgsId = this.machineDetail.id;
				jbgs.addRecord(this.orderInfo).then((res) => {
					if (res.code == '200') {
						uni.showToast({
							icon: 'none',
							title: '提交成功！'
						});
						this.showMask = false;
						this.getBdDetail(this.bdID);
					} else {
						uni.showToast({
							icon: 'none',
							title: '提交失败，请稍后重试！'
						});
					}
				});
			}
		}
	}
};
</script>

<style>
.main {
	width: 100vw;
	height: 100vh;
	background-color: #e0e0e0;
}

image {
	width: 100%;
}

.top {
	height: 140rpx;
	margin-top: 15rpx;
	padding-top: 25rpx;
	margin-right: 15rpx;
	background-color: #fff;
}

.type {
	height: 80rpx;
	background-color: #fff;
	float: left;
	margin-top: 15rpx;
	padding-top: 15rpx;
}

.content {
	width: 90%;
	height: 650rpx;
	background-color: #fff;
	margin: 25rpx auto;
	border-radius: 15rpx;
	padding: 25rpx;
}

.title {
	font-size: 35rpx;
	font-weight: 700;
	width: 100%;
	padding-top: 15rpx;
	padding-left: 8rpx;
	color: #306caa;
	float: left;
	overflow: hidden;
	word-break: break-all;
	/* break-all(允许在单词内换行。) */
	text-overflow: ellipsis;
	/* 超出部分省略号 */
	display: -webkit-box;
	/** 对象作为伸缩盒子模型显示 **/
	-webkit-box-orient: vertical;
	/** 设置或检索伸缩盒对象的子元素的排列方式 **/
	-webkit-line-clamp: 2;
	/** 显示的行数 **/
}

.creator {
	width: 100%;
	font-size: 25rpx;
	padding: 8rpx;
	float: left;
}

.publishTime {
	font-size: 25rpx;
	padding: 8rpx;
	float: right;
}

.detail_content {
	margin-top: 8rpx;
	/* 		text-indent: 2em; */
	line-height: 50rpx;
	justify-content: flex-start;
	padding: 25rpx;
}

.form-left {
	margin-left: 16px;
	padding: 5rpx 0;
}

.form-right {
	margin-top: 6px;
	margin-left: 6px;
	padding: 5px 0;
	width: 90%;
	border: 1px solid #d8d8d8;
	border-radius: 3px;
}

.uni-form-item {
	margin: 60rpx 30rpx;
	border-radius: 50px;
}

.submit_view {
	height: 90rpx;
}

.submit_view .submit {
	background-color: #016fb8;
	height: 70rpx;
	width: 40%;
	font-size: 28rpx;
	margin-top: 20rpx;
	float: left;
}

.submit_view .canncle {
	background-color: darkgray;
	height: 70rpx;
	width: 40%;
	font-size: 28rpx;
	margin-top: 20rpx;
	float: right;
}

.login_from_input {
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px #eee solid;
	padding: 20upx 0px;
	margin: 0px auto;
	background-color: #fff;
}

.login_from_name {
	width: 40%;
	margin-left: 40rpx;
	font-size: 30rpx;
}

.login_from_fun {
	width: 60%;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	text-align: right;
	margin-left: 25rpx;
}

.login_from_fun input {
	width: 100%;
	text-align: left;
	font-size: 14px;
}

/deep/ .uni-popup .uni-popup__wrapper {
	width: 70% !important;
	margin: 0 auto;
}

.price {
	width: 100%;
	background-color: #c6e2ff;
	font-size: 25rpx;
	color: #ff4444;
	padding: 8rpx;
	border-radius: 8rpx;
}

.devideline {
	float: left;
	height: 0.3rpx;
	width: 100%;
	background-color: #eeeeee;
	margin-top: 15rpx;
	margin-bottom: 15rpx;
}

.btn_order {
	position: fixed;
	z-index: 999;
	top: 350rpx;
	right: 30rpx;
	margin-right: 15rpx;
	width: 100px;
	text-align: center;
	float: right;
}

.maskClass {
	position: fixed;
	bottom: 0;
	top: 0;
	left: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 2;
}
</style>
